<template>
  <div>
    <el-card>
      <div slot="header">
        <span>{{typeName}}菜单</span>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-position="left">
        <el-form-item label="菜单名称:" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请填写"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单:" prop="parentId">
          <el-cascader
            expand-trigger="hover"
            :props="menuProps"
            :options="menuData"
            v-model="menuValue"
            @change="handleChange"
            change-on-select
            :disabled="supMenuDisable"
            placeholder="请选择上级菜单">
          </el-cascader>
        </el-form-item>
        <el-form-item label="链接:" prop="path">
          <el-input v-model="ruleForm.path" placeholder="请填写"></el-input>
        </el-form-item>
        <el-form-item label="路径:" prop="component">
          <el-input v-model="ruleForm.component" placeholder="请填写"></el-input>
        </el-form-item>
        <el-form-item label="重定向地址:" prop="redirect">
          <el-input v-model="ruleForm.redirect" placeholder="请填写"></el-input>
        </el-form-item>
        <el-form-item label="图标:" prop="meta">
          <el-input v-model="ruleForm.meta" placeholder="请填写"></el-input>
        </el-form-item>
        <el-form-item label="菜单序号:" prop="sort">
          <el-input v-model="ruleForm.sort" placeholder="请填写菜单序号"></el-input>
        </el-form-item>
        <el-form-item label="类型:" prop="hidden">
          <el-radio-group v-model="ruleForm.hidden">
            <el-radio :label="1">按钮</el-radio>
            <el-radio :label="0">菜单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button class="white-btn" size="small" @click="onCancel">取消</el-button>
          <el-button class="green-btn" size="small" @click="submitForm('ruleForm')">确定</el-button>
          <span>（<span style="color: red;">* </span>为必填项）</span>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getMenuTree, addMenu, getMenuDetail, updateMenu } from '@/api/sysSettings/menu'
import { Message } from 'element-ui'

export default {
  name: 'info',
  data () {
    return {
      id: this.$route.params.id, // 路由参数--id
      type: this.$route.params.type, // 路由参数--type
      typeName: '', // 路由名称
      // 表单数据
      ruleForm: {
        name: '', // 菜单名称
        parentId: 0, // 上级菜单id
        parentIds: 0, // 所以上级菜单id
        path: '', // 路径
        component: '', // 链接
        redirect: '', // 重定向地址
        meta: '', // 图标
        sort: '', // 菜单序号
        hidden: '' // 按钮还是菜单,按钮则隐藏(true),菜单则显示(false)
      },
      // 级联选择器配置项
      menuProps: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      menuData: [], // 上级菜单数据
      menuValue: [], // 选择器默认值
      supMenuDisable: false, // 是否禁用选择器
      // 表单验证规则
      rules: {
        name: [{required: true, message: '请填写菜单名称', trigger: 'blur'}],
        operation: [{required: true, message: '请选择菜单类型', trigger: 'change'}]
      }
    }
  },
  mounted () {
    if (this.type === 'add') {
      this.typeName = '新增下级'
      if (this.id !== '-1') {
        // 添加下级菜单
        this.menuValue = this.id.split(',') // 给选择器赋默认值
        this.ruleForm.parentId = this.menuValue[this.menuValue.length - 1]
        this.ruleForm.parentIds = this.id
      }
    } else if (this.type === 'update') {
      this.typeName = '修改'
      this.getMenuInfo(this.id)
    }
    this.getMenuTree()
  },
  methods: {
    // 选择上级菜单
    handleChange (val) {
      this.ruleForm.parentId = val[val.length - 1]
      this.ruleForm.parentIds = val.join(',')
    },
    // 获取菜单树
    getMenuTree () {
      let param = {}
      getMenuTree(param).then(response => {
        let data = response.object || []
        if (data.length === 0) {
          this.supMenuDisable = true // 没有上级菜单时，禁用选择器
        }
        this.menuData = this.getFormatMenu(data)
      }).catch(error => {
        Message({
          message: error.message,
          type: 'error'
        })
      })
    },
    // 删除菜单树中子节点为空的项
    getFormatMenu (array) {
      array.forEach(item => {
        if (item.children && item.children.length > 0) {
          this.getFormatMenu(item.children)
        } else {
          delete item.children
        }
      })
      return array
    },
    // 获取菜单信息
    getMenuInfo (id) {
      let param = {
        id: id
      }
      getMenuDetail(param).then(response => {
        let data = response.object
        this.menuValue = data.parentIds.split(',') // 给选择器赋默认值
        this.ruleForm = {
          name: data.name,
          parentId: data.parentId,
          parentIds: data.parentIds,
          path: data.path,
          component: data.component,
          redirect: data.redirect,
          meta: data.meta,
          sort: data.sort,
          hidden: data.hidden
        }
      }).catch(error => {
        Message({
          message: error.message,
          type: 'error'
        })
      })
    },
    // 提交表单
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗?', '系统提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: ''
          }).then(() => {
            if (this.type === 'add') {
              // 添加菜单
              addMenu(this.ruleForm).then(response => {
                this.$router.push('/system/menuManagement')
              })
            } else if (this.type === 'update') {
              this.ruleForm.id = this.id
              // 修改菜单
              updateMenu(this.ruleForm).then(response => {
                this.$router.push('/system/menuManagement')
              })
            }
          }).catch(() => {})
        } else {
          Message({
            message: '提交失败',
            type: 'error'
          })
          return false
        }
      })
    },
    // 取消按钮
    onCancel () {
      this.$router.push('/system/menuManagement')
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-input, .el-select, .el-switch, .el-cascader { width: 300px; }
  @import 'src/styles/settings.scss';
</style>
